import React, { PureComponent, Fragment } from 'react';
import { connect } from 'dva';

import { Form, Button, Tabs, Card, message } from 'antd';
import PageHeaderLayout from '../../../layouts/PageHeaderLayout';
import BusinessImportDetails from '../../../components/Falcon/BusinessImportDetails';
import ImageImportDetails from '../../../components/Falcon/ImageImportDetails';
import FooterToolbar from 'components/FooterToolbar';
import { solo } from '../../../common/solo';
import querystring from 'querystring';

const TabPane = Tabs.TabPane;

@connect(({ supplement, risk, apply }) => ({
  supplement,
  risk,
  apply,
}))
@Form.create()
export default class BusinessImport extends PureComponent {
  state = {
    id: null,
    status: null,
  };

  componentDidMount() {
    const { dispatch, location } = this.props;
    const params = querystring.parse(location.search.slice(1));
    this.setState({
      id: params.id,
      status: params.status,
    });
    dispatch({
      type: 'supplement/fetchBusinessDetails',
      payload: { id: params.id },
    });
    dispatch({
      type: 'risk/selectCustManager',
    });
  }

  handleCallback = () => {
    window.history.back(-1);
  };

  handleAttachmentData = businessDetails => {
    const projectInfo = {
      projectId: businessDetails.baseInfo.bizId,
    };
    const attachmentData = [
      {
        key: '1',
        name: '身份证正面',
        projectInfo: projectInfo,
        customerId: '',
        fieldName: 'idcardFront',
        attachKind: '1111',
        maxCount: 10,
        files: [],
      },
      {
        key: '2',
        name: '身份证反面',
        projectInfo: projectInfo,
        customerId: '',
        fieldName: 'idcardBack',
        attachKind: '1112',
        maxCount: 10,
        files: [],
      },
      {
        key: '3',
        name: '驾驶证',
        projectInfo: projectInfo,
        customerId: '',
        fieldName: 'driver',
        attachKind: '1250',
        maxCount: 10,
        files: [],
      },
      {
        key: '4',
        name: '收入证明',
        projectInfo: projectInfo,
        customerId: '',
        fieldName: 'income',
        attachKind: '1210',
        maxCount: 210,
        files: [],
      },
      {
        key: '5',
        name: '银行流水',
        projectInfo: projectInfo,
        customerId: '',
        fieldName: 'bankStatement',
        attachKind: '1220',
        maxCount: 30,
        files: [],
      },
      {
        key: '6',
        name: '家访照片',
        projectInfo: projectInfo,
        customerId: '',
        fieldName: 'homeVisit',
        attachKind: '1310',
        maxCount: 50,
        files: [],
      },
      {
        key: '7',
        name: '提车照片',
        projectInfo: projectInfo,
        customerId: '',
        fieldName: 'pickCar',
        attachKind: '1620',
        maxCount: 30,
        files: [],
      },
      {
        key: '8',
        name: '行驶证',
        projectInfo: projectInfo,
        customerId: '',
        fieldName: 'driveLicenseImg',
        attachKind: '1680',
        maxCount: 10,
        files: [],
      },
      {
        key: '9',
        name: '合格证',
        projectInfo: projectInfo,
        customerId: '',
        fieldName: 'carQualified',
        attachKind: '1670',
        maxCount: 10,
        files: [],
      },
      {
        key: '10',
        name: '登记证',
        projectInfo: projectInfo,
        customerId: '',
        fieldName: 'carRegister',
        attachKind: '1660',
        maxCount: 10,
        files: [],
      },
      {
        key: '11',
        name: '首付款凭证',
        projectInfo: projectInfo,
        customerId: '',
        fieldName: 'firstPayImg',
        attachKind: '1610',
        maxCount: 10,
        files: [],
      },
      {
        key: '12',
        name: '其他',
        projectInfo: projectInfo,
        customerId: '',
        fieldName: 'otherImg',
        attachKind: '1690',
        maxCount: 50,
        files: [],
      },
    ];

    const attachs = businessDetails.attachs;

    return attachmentData.map((attachmentMetaInfo, index) => {
      const { fieldName } = attachmentMetaInfo;
      const imageKeyList = attachs[fieldName];
      if (!imageKeyList) {
        return attachmentMetaInfo;
      }
      const imageInfoList = imageKeyList.map(key => {
        return {
          key,
          url: `${solo.imgShow}${key}`,
          status: 'done',
          uid: key,
          name: key,
        };
      });
      attachmentMetaInfo.files = imageInfoList;
      return attachmentMetaInfo;
    });
  };

  handleAttachmentVideoData = businessDetails => {
    const projectInfo = {
      projectId: businessDetails.baseInfo.bizId,
    };
    const attachVideoData = [
      {
        key: '13',
        name: '视频附件',
        projectInfo: projectInfo,
        customerId: '',
        fieldName: 'videos',
        attachKind: '9480',
        maxCount: 50,
        files: [],
      },
    ];
    const attachs = businessDetails.attachs;

    return attachVideoData.map((attachmentMetaInfo, index) => {
      const { fieldName } = attachmentMetaInfo;
      const imageKeyList = attachs[fieldName];
      if (!imageKeyList) {
        return attachmentMetaInfo;
      }
      const imageInfoList = imageKeyList.map(key => {
        return {
          key,
          url: `${solo.imgShow}${key}`,
          status: 'done',
          uid: key,
          name: key,
        };
      });
      attachmentMetaInfo.files = imageInfoList;
      return attachmentMetaInfo;
    });
  };

  handleAttachmentRemove = (fieldName, fileInfo) => {
    const { dispatch } = this.props;
    dispatch({
      type: 'apply/deleteFile',
      payload: {
        fileId: fileInfo.key,
      },
    });
  };

  handleSubmitBrank = () => {
    const { dispatch } = this.props;
    const form = this.formRef.props.form;
    form.validateFieldsAndScroll((error, values) => {
      if (!error) {
        // console.log(" values", values)
        dispatch({
          type: 'supplement/submitBrack',
          payload: {
            id: this.state.id,
            ...values,
          },
          callback: () => {
            const { supplement: { businessResult, businessMessage } } = this.props;
            if (businessResult.code == 200) {
              message.success(businessMessage);
              window.history.back(-1);
            } else {
              message.error(businessResult.message);
            }
          },
        });
      }
    });
  };

  handleDetailsUpload = () => {
    const { dispatch } = this.props;
    const form = this.formRef.props.form;
    form.validateFieldsAndScroll((error, values) => {
      // console.log("222222222222222222",values )
      if (!error) {
        dispatch({
          type: 'supplement/submitDetails',
          payload: {
            id: this.state.id,
            ...values,
          },
          callback: () => {
            const { supplement: { businessResult, businessMessage } } = this.props;
            if (businessResult.code == 200) {
              message.success(businessMessage);
              window.history.back(-1);
            } else {
              message.error(businessResult.message);
            }
          },
        });
      }
    });
  };

  handleVideoUpload = () => {
    const { dispatch } = this.props;
    dispatch({
      type: 'supplement/submitUploadVideo',
      payload: {
        id: this.state.id,
      },
      callback: () => {
        const { supplement: { businessResult, businessMessage } } = this.props;
        if (businessResult.code == 200) {
          message.success(businessMessage);
          window.history.back(-1);
        } else {
          message.error(businessResult.message);
        }
      },
    });
  };

  saveFormRef = formRef => {
    this.formRef = formRef;
  };

  render() {
    const { supplement: { businessDetails, businessLoading } } = this.props;
    const { risk: { riskCustManager } } = this.props;
    return (
      <PageHeaderLayout title="业务补导入详情">
        <Card loading={businessLoading}>
          <Tabs defaultActiveKey="1" onChange={this.callback}>
            <TabPane tab="基本信息" key="1">
              {businessDetails && (
                <BusinessImportDetails
                  disables={
                    this.state.status == 0 || this.state.status == 14 || this.state.status == 15
                      ? 'false'
                      : 'true'
                  }
                  businessDetails={businessDetails}
                  status={this.state.status}
                  wrappedComponentRef={this.saveFormRef}
                  riskCustManager={riskCustManager}
                />
              )}
            </TabPane>
            <TabPane tab="影像信息" key="2">
              {businessDetails && (
                <ImageImportDetails
                  data={this.handleAttachmentData(businessDetails)}
                  projectId={businessDetails.baseInfo.bizId}
                  id={this.state.id}
                  // wrappedComponentRef={this.saveFormRefAssets}
                  onAttachmentChanged={this.hanleAttachmentChanged}
                  onAttachmentVideo={this.handleAttachmentVideoData(businessDetails)}
                  onAttachmentRemove={this.handleAttachmentRemove}
                />
              )}
            </TabPane>
          </Tabs>
        </Card>
        <FooterToolbar style={{ width: '100%' }}>
          <Button onClick={this.handleCallback}>返回</Button>
          {this.state.status == 0 ? (
            <Button type="primary" style={{ marginLeft: '10px' }} onClick={this.handleDetailsUpload}>
            保存
          </Button>
          ) : null}
          
          {this.state.status == 0 || this.state.status == 14 || this.state.status == 15 ? (
            <Button type="primary" style={{ marginLeft: '10px' }} onClick={this.handleSubmitBrank}>
              上报银行
            </Button>
          ) : null}
          {this.state.status != 0 && this.state.status != 13 ? (
            <Button type="primary" style={{ marginLeft: '10px' }} onClick={this.handleVideoUpload}>
              重传影像
            </Button>
          ) : null}
        </FooterToolbar>
      </PageHeaderLayout>
    );
  }
}
